import React, { useState, useImperativeHandle, useEffect } from "react";
import { Modal } from "antd";
import { useTranslation } from "react-i18next";

export const AgreeNotice = React.forwardRef(({ agreeClick }, ref) => {
  const { t } = useTranslation();
  const [visible, setVisible] = useState(false);

  const [locale, setLocale] = React.useState("");
  useEffect(() => {
    if (sessionStorage.getItem("langType")) {
      setLocale(sessionStorage.getItem("langType") || "en-US"); // 设置默认语言为浏览器的语言
    } else {
      setLocale("en-US"); // 如果无法获取到浏览器语言则默认为英文
    }
    return () => {}; // 清除effects时不进行任何操作
  }, []);
  useImperativeHandle(ref, () => ({
    open: () => {
      return handleOpen();
    },
  }));
  const handleOpen = () => {
    setVisible(true);
  };

  const handleAgree = () => {
    agreeClick();
    setVisible(false);
  };

  const handleClose = () => {
    setVisible(false);
  };
  return (
    <Modal
      width={locale == "zh-CN" ?'528px' : '680px'}
      footer={null}
      open={visible}
      title={t("dappIndexRegulation.agreeModalTitle")}
      className="dapp-index-regulation-agree-notice-modal"
      onCancel={() => handleClose()}
      style={{ top: 84 }}
    >
      {locale == "zh-CN" ? (
        <div className="agree-notice-box">
          <div className="top-notice">
            {t("dappIndexRegulation.agreeMessage1")}
          </div>
          <div className="bottom-notice">
            <span className="pre-text">
              {t("dappIndexRegulation.agreeMessage2")}
            </span>
            <span className="red-text">
              {t("dappIndexRegulation.agreeMessage3")}
            </span>
          </div>

          <div className="agree-btn-box">
            <div className="agree-btn" onClick={() => handleAgree()}>
              {t("dappIndexRegulation.agreeNext")}
            </div>
          </div>
        </div>
      ) : (
        <div className="agree-notice-box">
          <div className="top-notice">
            <div className="text">
            {t("dappIndexRegulation.agreeMessageEn1")}
            </div>
            <div className="text">
            {t("dappIndexRegulation.agreeMessageEn2")}
            </div>
            <div className="text">
            {t("dappIndexRegulation.agreeMessageEn3")}
            </div>
            <div className="text">
            {t("dappIndexRegulation.agreeMessageEn4")}
            </div>
            <div className="text">
            {t("dappIndexRegulation.agreeMessageEn5")}
            </div>
            <div className="text">
            {t("dappIndexRegulation.agreeMessageEn6")}
            </div>
          </div>
          <div className="bottom-notice">
            <div className="pre-text">
              {t("dappIndexRegulation.agreeMessageEn7")}
            </div>
            <div className="red-text">
              {t("dappIndexRegulation.agreeMessageEn8")}
            </div>
          </div>

          <div className="agree-btn-box">
            <div className="agree-btn" onClick={() => handleAgree()}>
              {t("dappIndexRegulation.agreeNext")}
            </div>
          </div>
        </div>
      )}
    </Modal>
  );
});
